<template>
    <div class="cmd-list-box">
        <router-link class="cmd-item" :to="'/home/commodityinfo/' + item.id " tag="div" v-for="item in commoditys" :key="item.id">
            <img :src="item.imgUrl" alt="">
            <h1 class="title" v-html="item.title">{{ item.title }}</h1>
            <div class="cmd-param">
                <p class="jinji">
                    <span class="now">￥{{ item.now }}</span>
                    <span class="old">￥{{ item.old }}</span>
                </p>
                <p class="rmz">
                    <span>{{ item.status }}</span>
                    <span>剩{{ item.remain }}件</span>
                </p>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "CommodityList",
        data() {
            return {
                commoditys: []
            }
        },
        methods: {
            getCommodityList() {
                this.$http.get('commodityList.main').then((result) => {
                    if (result.status === 200) {
                         this.commoditys = result.body;
                    }
                })
            }
        },
        created() {
            this.getCommodityList();
        }
    }
</script>

<style lang="scss" scoped>
    .cmd-list-box {
        /*css3 里面的两端对齐，和下面使用浮动效果一样，尽量能使用 css3 就使用 css3*/
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        justify-content: space-between;
        .cmd-item {
            width: 49%;
            border: 1px solid #CCCCCC;
            box-shadow: 0 0 10px #999999;
            margin: 5px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 290px;
            /*height: 100%;*/
            .title {
                font-size: 14px;
                font-weight: bold;
                height: 43px;
                overflow: hidden;
            }

            img {
                width: 100%;
                /*height: 100%;*/
            }
            .cmd-param {
                border: 2px solid #FFFFFF;
                padding: 5px;
                background-color: #f0f0f0;

                .jinji {
                    margin-bottom: 5px;
                }
                .now {
                    font-size: 18px;
                    color: red;
                }
                .old {
                    /*给字体加上横线*/
                    text-decoration: line-through;
                    margin-left: 10px;
                }
                .rmz {
                    margin: 0;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>
<style>
    em {
        font-style: normal;
    }
    .skcolor_ljg {
        color: red;
    }
</style>